﻿@model S4Store.Models.Chart.Pie
@{
    Layout = null;
    ViewBag.Title = "Pie";
    var container = "div" + Guid.NewGuid().ToString();
    var xAxis = new List<String>();
   // var rate = "";
   // if (Model.IsRate) { rate = "%"; }
    var data =new List<String>();
    foreach(var kv in Model.Data){
        data.Add("{name:'"+kv.Key+"',y:"+kv.Value.toInt()+"}");
    }
}
<div id="@container"></div>        
<script type="text/javascript">
    $('#@container').highcharts({
        chart: {
            type: 'pie'
            @if(Model.Width!=null){
                <text>
                ,
                width:@Model.Width
                </text>
            }
            
            @if(Model.Height!=null){
                <text>
                ,
                height:@Model.Height
                </text>
            }
        },
        //colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] ,
        //将蓝色改为浅蓝,蓝色和绿色中间 插入黄色
        colors: ['#56a7b8','#f9be64', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'] ,
        title: {
            text: '@Model.Name'
        },
        tooltip: {
            headerFormat: '<table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{point.name}: </td>' +
            '<td style="padding:0"><b>{point.y}@(Model.Unit)</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.percentage:.1f} %'
                }
            }
        },
        series: [
                    {
                        name: null,
                        data: [@Html.Raw(String.Join(",", data))]
                    }
                    
        ]
    });
</script>

